<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>增加用户</title>
    <!--引入bootstrap-->
    <script src="../bootstrap-4.6.0-dist/js/bootstrap.js"></script>

    <link rel="stylesheet" href="../bootstrap-4.6.0-dist/css/bootstrap.min.css">
    <!--引入jquery-->
    <script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
    <!--引入layui-->
    <script src="../layui/layui.js"></script>
    <link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>
<div class="layui-fluid" style="margin-top: 25px">
    <div class="layui-col-md4 layui-col-md-offset4">
        <form class="layui-form layui-form-pane" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input type="text" name="username" required id="username" lay-verify="required|username" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码框</label>
                <div class="layui-input-block">
                    <input type="password" name="password" required id="password" lay-verify="required|password" placeholder="请输入密码" autocomplete="off" class="layui-input">
                </div>

            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-block">
                    <input type="text" name="email" required id="email" lay-verify="required|email" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">选择框</label>
                <div class="layui-input-block">
                    <select name="city" lay-verify="required">
                        <option value=""></option>
                        <option value="0">北京</option>
                        <option value="1">上海</option>
                        <option value="2">广州</option>
                        <option value="3">深圳</option>
                        <option value="4">杭州</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-primary layui-border-blue" lay-submit lay-filter="userUpdateSubmit">立即修改</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>


<script>
    //填充数据
    $.ajax(
        ""
    )
</script>
<script>
    //Demo
    layui.use('form', function(){
        var form = layui.form;
        //监听提交
        form.on('submit(userUpdateSubmit)', function(data){
            layer.msg(JSON.stringify(data.field));
            return false;
        });
        //自定义表单验证
        form.verify({
            username: [ /^(?![^a-zA-Z]+$)(?!\D+$).{6,12}$/
                ,'帐号必须6~12位，包含字母和数字'],
            password: [/^(?![^a-zA-Z]+$)(?!\D+$).{6,12}$/
                ,'密码必须至少6~1位，包含字母和数字']
        })
    });
</script>

</body>
</html>
